<template>
  <div class="pagination">
    <button
      class="btn-prev number"
      :disabled="newCurrentPage === 1"
      @click="setMyCurrentPage(-1)"
    >
      <span class="iconfont icon-arrow-left-bold"></span>
    </button>
    <ul class="pager">
      <li
        :class="{ number: true, active: newCurrentPage === 1 }"
        @click="toPage(1)"
      >
        1
      </li>
      <i class="iconfont icon-elipsis number" v-show="startEnd.start > 2"></i>
      <li
        v-for="(number, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        :class="{
          number: true,
          active: newCurrentPage === startEnd.start + index,
        }"
        @click="toPage(startEnd.start + index)"
      >
        {{ startEnd.start + index }}
      </li>
      <i
        class="iconfont icon-elipsis number"
        v-show="startEnd.end < totalPages - 1"
      ></i>
      <li
        :class="{ number: true, active: newCurrentPage === totalPages }"
        @click="toPage(totalPages)"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      class="btn-next number"
      @click="setMyCurrentPage(1)"
      :disabled="newCurrentPage === totalPages"
    >
      <span class="iconfont icon-arrow-right"></span>
    </button>
    <span class="total">总共 {{ total }} 条 </span>
  </div>
</template>

<script>
export default {
  name: "XPagination",
  data() {
    return {
      newCurrentPage: this.currentPage,
    };
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
  },
  computed: {
    // 返回总页数
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },

    startEnd() {
      /*
        情况1：
          1 ... 4 5 [6] 7 8 ... 30

          start = currentPage - 2  -> 4
          end = start + 4  -> 8

        情况2：
          [1] 2 3 4 5 6 ... 30
          1 [2] 3 4 5 6 ... 30
          1 2 [3] 4 5 6 ... 30

          start = currentPage - 2  -> 1
          end = start + 4  -> 5

          start和end值有问题。
          解决：start有最小值，为2

          start = currentPage - 2  -> 1 < 2 -> 2
          end = start + 4 -> 6

        情况3：
          1 .... 25 26 27 28 29 [30]
          1 .... 25 26 27 28 [29] 30
          1 .... 25 26 27 [28] 29 30

          start = currentPage - 2 -> 28
          end = start + 4 -> 32

          start和end值有问题。
          解决：end有最大值，为totalPages - 1

        情况4：
          1 2 [3] 4 5 6
          1 2 [3] 4 5
          1 2 [3] 4

        情况5：
          [1]
          1 [2]
      */
      //  结构总页数 ，和当前页
      const { newCurrentPage, totalPages } = this;

      if (totalPages <= 7) {
        return { start: 2, end: totalPages - 1 < 1 ? 1 : totalPages - 1 };
      }

      //start 开始 最小值为2  // end 结束 最大值为总页数
      let start = newCurrentPage - 2;
      //  不能小于2时
      if (start < 2) start = 2;

      let end = start + 4;
      //   最大值在总页数 - 1
      if (end > totalPages - 1) {
        end = totalPages - 1;
        start = end - 4;
      }

      return { start, end };
    },
  },
  methods: {
    setMyCurrentPage(number) {
      this.newCurrentPage += number;
    },
    toPage(pageNum) {
      this.newCurrentPage = pageNum;
    },
  },
  watch: {
    newCurrentPage(newVal) {
      this.$emit("currentChange", newVal);
    },
    
  },
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  font-weight: 700;
}
.pager {
  display: flex;
}
.number {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  width: 30px;
  border-radius: 2px;
  text-align: center;
  line-height: 30px;
}
.btn-prev,
.btn-next {
  border: none;
  outline: none;
}
.btn-prev:disabled,
.btn-next:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}
.total {
  height: 30px;
  line-height: 30px;
  margin-left: 5px;
}
.active {
  background-color: #e1251b;
}
</style>
